import React, { useState } from 'react'
import { Form, Input, Button, Row, Col, Spin } from "antd";
import Logo from "@/common/img/logo.svg"
import IconMap from '@/components/IconMap';
import AcountLogin from './components/AcountLogin';
import MvCodeLogin from './components/MvCodeLogin';
import { useDispatch, useSelector, useHistory } from "umi";
import "./css/login.less";

const FormItem = Form.Item;
<Button disabled></Button>
function selectComponent(type, props) {
    return !type ? <AcountLogin {...props}></AcountLogin> : <MvCodeLogin {...props}></MvCodeLogin>;
}

export default function login({ history }) {
    const [form] = Form.useForm();
    const [types, settypes] = useState(0);
    const dispatch = useDispatch();
    // 加载效果处理
    let IsLoading = useSelector(state => state.loading.effects);
    IsLoading = IsLoading["user/login"] || false;
    // 登录
    function handleSubmit(values) {
        values = { ...values, type: types };
        dispatch({
            type: "user/login",
            payload: values
        })
    }
    return (
        <Spin spinning={IsLoading} size={'large'} tip="加载中...">
            <div className='login-Container'>
                <div className='header'>
                    <img src={Logo} alt="" />
                    <span>织信人事管理系统</span>
                </div>
                <Form form={form} onFinish={handleSubmit}>
                    {selectComponent(types, { FormItem, Input, Button, form })}
                    <FormItem>
                        <Button block={true} type='primary' htmlType='submit'>登录</Button>
                    </FormItem>
                </Form>
                <Row>
                    <Col span={9}>
                        <div className='forget-bottom left' onClick={() => {
                            history.push("/users/forgetPassword");
                        }}>忘记密码?</div>
                    </Col>
                    <Col span={15}>
                        <div className='forget-bottom rigth' onClick={() => { settypes(types ? 0 : 1) }}>
                            {!types ? "使用手机号码登录" : "使用账号名密码进行登录"}{IconMap.arrRowRight}
                        </div>
                    </Col>
                </Row>
            </div>
        </Spin>
    )
}
